<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的课程</title>
    <link rel="stylesheet" href="static/elementui.css">
    <script src="static/vue@2.6.14.js"></script>
    <script src="static/elementui.js"></script>
    <script src="static/axios.min.js"></script>
    <style>
        body {
            padding: 20px;
        }

        .course-card {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card v-for="course in courses" :key="course.id" class="course-card">
        <div slot="header" class="clearfix">
            <span>{{ course.courseName }}</span>
        </div>
        <div>
            <p><strong>开课时间:</strong> {{ course.startTime }}</p>
            <p><strong>结课时间:</strong> {{ course.endTime }}</p>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                courses: []
            };
        },
        methods: {
            fetchCourses() {
                const userData = localStorage.getItem('user');
                if (userData) {
                    const user = JSON.parse(userData);
                    axios.get('/course', {
                        params: {
                            operation: 'getCoursesByStudentId',
                            studentId: user.id
                        }
                    }).then(response => {
                        const {code, data} = response.data;
                        if (code === 200) {
                            this.courses = data;
                        } else {
                            this.$message.error('获取课程列表失败');
                        }
                    }).catch(error => {
                        console.error('获取课程列表失败:', error);
                        this.$message.error('获取课程列表失败');
                    });
                }
            }
        },
        mounted() {
            this.fetchCourses();
        }
    });
</script>
</body>
</html>